<template>
	<view >
		<view class="title">
			{{titles}}
		</view>
		 <u-swiper
		                :list="urls2"
		                previousMargin="30"
		                nextMargin="30"
		                circular
		                :autoplay="false"
		                radius="5"
		                bgColor="#ffffff"
						@click="open"
		        ></u-swiper>
		<!--@click="newphoto()" <u-album style="margin: 0 5%;" :urls="urls2" :previewFullImage='true' :bigimg='0' multipleSize="200upx" singleSize='200upx'></u-album> -->
		<u-parse class="texts"
		
		 :customStyle="{
				width: albumWidth + 'px'
			}" 
		:content="content"></u-parse>
		<view class="comment" >
			评论
		</view>
		
		
		<!-- <scroll-view style="margin-bottom: 80upx;"> -->
	<!-- 	<view style="margin-top: 20upx;">
			<view v-for="(item,index) in commentlist" class="lists">
				<view class="listtop">
					<view style="width: 20%;">
						<image :src='item.imageUrl' mode="" style="width: 40upx;height: 40upx;border-radius: 999rem;"></image>
					</view>
					
					<text class="names" >{{item.nickName}}</text>
				</view>
				<view class="listtop">
					<view style="width: 90%;">{{item.commentContent}}</view>
					<u-icon name="thumb-up"      v-if='item.commentHitState == 0' style="width: 10%;" color="#AAAAAA" size="28" @click="zan(item,index)"></u-icon>
					<u-icon name="thumb-up-fill" v-else style="width: 10%;" color="#FFFF00" size="28" @click="zan(item,index)"></u-icon>
					<u-icon v-if="item.userId == userid" name="trash-fill" style="width: 10%;" color="#AAAAAA" size="28" @click="del(item,index)"></u-icon>
				</view>
			</view>
		</view> -->
		
		<view class="biglist" >
			<view v-for="(item,index) in commentlist" class="lists2">					
					<text class="name" >{{item.nickName}}</text><text>:</text>
					<view >{{item.commentContent}}</view>
			</view>
		</view>
		
		
		<view class="tests" >
			<textarea adjust-position="true" cursor-spacing="20" :fixed='true' autoHeight v-model='commentContent' placeholder="说点你的想法" border="bottom" style="width: 80%;"></textarea>
			 <u-button text="发送" type="success" size="normal" style="width: 20%;" @click="send()"></u-button>
		</view >
			<!-- <comment ref="comment" :getDataFn="commentGetDataFn" :idFn='fileid' @fatherMethod="commentlists"></comment> -->
		<u-modal :closeOnClickOverlay='true' :show="showdel" title="是否删除文章" :content='content' :showCancelButton='true' @cancel='() => showdel = false' @confirm='delfile' @close="() => showdel = false"></u-modal>
	<!-- 		
		<u-popup adjust-position="false" :show="show" mode="bottom" :closeOnClickOverlay='true'  @close="close" >
		       <view class="tests2">
				   <input adjust-position="false" type="text" value="" />
		           <u-textarea :focus='fff' :fixed='true' autoHeight v-model='commentContent' placeholder="说点你的想法" border="bottom" style="width: 80%;"></u-textarea>
		            <u-button text="发送" type="success" size="normal" style="width: 20%;" @click="send()"></u-button>
		        </view>
		</u-popup> -->

	</view>
</template>

<script>
	let timer=null
	import {
		file,
		articledel
		// commentlist,
	} from '@/api/community'
	import {
		commentlist,
		addcomment,
		delcomment,
		zan,
		nzan,
	} from '@/api/minefile'
	export default {
		data() {
			return {
				bigimgurl:'',
				content:'是否删除当前发布的文章',
				showdel:false,
				commentlist:[],
				albumWidth: 0,
				urls2:[],
				titles:'',
				content:``,
				circles:{
					pageSize:10,
					pageNum:1,
					circleId:null
				},
				commentContent:null,
				userid:null,
				msgListHeight:0,
				screenHeight:0,
				
				fff:false,
				show:false,
				show2:true,
			}
		},
		onReachBottom() {
		            //阻止重复加载
		            if(timer !== null){
		                clearTimeout(timer)
		            }
					this.circles.pageNum++;
		            timer=setTimeout(()=>this.circlelist(),500)
		            // this.getMoreNews()
		},
		onLoad(data) {	
			this.userid = JSON.parse(uni.getStorageSync('user')).id
			console.log(data)
			this.circles.circleId = data.id;
			this.type = data.type;
			this.files();
			this.circlelist();
		},
		methods: {
			newphoto(item){
				// this.bigimg = item;
				this.showbigimg = true;
			},
			toComment() {
			
				this.$refs.comment.show(this.dataList[this.k].id);
			},
			delfile(){
				articledel(this.circles.circleId).then(res => {
					console.log(res.data)
					if(res.success == 1){
						uni.showToast({
							title: '删除成功后跳转',
							icon:'success',
							duration: 2000
						});
						setTimeout(() => {
						     uni.navigateBack({
								 url: 'files?id=1'
						     })
						   },2000)
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			opens(){
					this.show = true;
				    this.fff = true;
			},
			close(){
				this.fff = false;
				this.show = false;
			},
			commentGetDataFn: function() {
				return new Promise(rs => {
					let arr = []
					for (let sss in this.commentlist) {
						let likes = false;
						if (this.commentlist[sss].commentHitState == 1) {
			
							likes = true;
						}
						// console.log(likes,this.commentlist[sss].commentPraseCount,"显示是否点赞",sss)
						let lists = {
							"content": this.commentlist[sss].commentContent,
							"name": this.commentlist[sss].nickName,
							"likeCounts": this.commentlist[sss].commentPraseCount,
							"imageUrl": this.commentlist[sss].imageUrl,
							"id": this.commentlist[sss].id,
							"isLike": likes,
						}
						arr.push(lists)
					}
					rs({
						"pages": this.pageNum,
						"records": arr
					})
				})
			},
			send(){
				let sss = {
					circleId:this.circles.circleId,
					commentContent:this.commentContent,
				}
				addcomment(sss).then(res => {
					console.log(res.data)
					if(res.success == 1){
						// this.urls2 = res.data.stringList;
						// this.titles = res.data.title;
						// this.content    = res.data.description;
						this.commentlist.unshift(res.data);
						uni.showToast({
							title: '评论成功',
							icon:'success',
							duration: 2000
						});
						this.$forceUpdate();
						this.commentContent = null;
						this.fff = false;
						this.show = false;
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			zan(item,index){
				if(item.commentHitState == 0){
					// 点赞
					let sss = {
						circleId:this.circles.circleId,
						commentId:item.id
					}
					zan(sss).then(res => {
						console.log(res.data,"00000000000")
						if(res.success == 1){
							uni.showToast({
								title: '点赞成功',
								icon:'success',
								duration: 2000
							});
							this.commentlist[index].commentHitState = 1;
						}else{
							uni.showToast({
								title: res.data,
								icon:'none',
								duration: 2000
							});
						}	
					})
				}else{
					// 取消赞
					let sss = {
						// circleId:this.circles.circleId,
						commentId:item.id,
					}
					nzan(sss).then(res => {
						console.log(res.data)
						if(res.success == 1){
							uni.showToast({
								title: '取消成功',
								icon:'success',
								duration: 2000
							});
							this.commentlist[index].commentHitState = 0;
						}else{
							uni.showToast({
								title: res.data,
								icon:'none',
								duration: 2000
							});
						}	
					})
				}
			},
			del(item,index){
				let sss = {
					id:item.id,
				}
				delcomment(sss).then(res => {
					console.log(res.data)
					if(res.success == 1){
						uni.showToast({
							title: '删除成功',
							icon:'success',
							duration: 2000
						});
						this.commentlist.splice(index,1);
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			files(){
				let sss = {
					id:this.circles.circleId
				}
				file(sss).then(res => {
					if(res.success == 1){
						console.log(res.data,"0000000000000000000")
						this.urls2 = res.data.stringList;
						this.titles = res.data.title;
						this.content    = res.data.description;
						console.log(this.urls2)
					}else{
						uni.showToast({
							title: res.data,
							icon:'none',
							duration: 2000
						});
					}	
				})
			},
			circlelist() {
				commentlist(this.circles).then(res => {
					if(res.data.records.length != 0){
						for(let sss in res.data.records){
							this.commentlist.push(res.data.records[sss])
						}
						console.log(res.data)
						// this.circles.pageNum++;
					}else{
						this.circles.pageNum--;
						// uni.showToast({
						// 	title: '无更多内容',
						// 	icon:'none',
						// 	duration: 2000
						// });
					}
				})
			},
			leftClick() { 
				uni.navigateBack({
				})
			},
			rightClickdelshow(){
				// articledel
				this.showdel = true;
			},
			open(e){
				this.bigimg = this.urls2[e];
				uni.previewImage({
							current:e, //预览图片的下标
							urls:this.urls2 //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
			}
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	// page {
	// 	background-color: #e1e1e1 !important;
	// }
	.texts{
		width: 90%;
		margin: 0 auto;
		padding-top: 5%;
		padding-bottom: 20upx;
		
	}
	.comment{
		width: 90%;
		margin: 0 auto;
		padding-top: 5%;
		padding-bottom: 20upx;
		color: #0078FF;
		text-align: right;
	}	
	.tests{
		
		background-color: #FFF;
		position: fixed !important;
		// transform: translateZ(0);
		// z-index: 100;
		// float: left;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 90%;
		bottom: 0upx;
		display: flex;
		align-items: center;
	}
	.tests2{
		margin: 0 auto;
		left: 0;
		right: 0;
		width: 90%;
		display: flex;
		bottom: 0upx;
		z-index: 100;
	}
	.lists{
		width: 90%;
		margin: 0upx auto;
		border-top:1upx solid #F7F7F7;
		background-color: #f7f7f7;

	}
	.biglist{
		margin-top: 20upx;
		border-radius: 20upx;
		width: 90%;
		margin: 0upx auto;
		overflow: hidden;
		background-color: #f7f7f7;
		.lists2{
			display: flex;
			justify-content: flex-start;
			width: 100%;
			margin: 10upx auto;
			padding: 10upx;
			border-top:1upx solid #F7F7F7;
			
			// border-radius: 20upx;
			// border-bottom: 2upx solid #FFFFFF ;
			.name{
				text-align: left;
				color: #61699a;
			}
		}
	}
	
	.names{
		text-align: left;
		width: 80%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.listtop{
		width: 100%;
		display: flex;
	}
	.title{
		width: 90%;
		margin: 0 auto;
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #161616;
		opacity: 1;
		margin-bottom: 20upx;
	}
	.comment{
		
	}
	.zbg{
		background-color: #333333;
		display: flex;
		flex-direction:row;
		align-items: center;
		.bigimg{
			width: 100%;
			// margin-top: 50%;
		}
	}
	
	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height:100%;
	}
	
	movable-area {
		height: 100%;
		width: 100%;
		position:fixed;
		overflow: hidden;
	}
		
	movable-view image{
		width:100%;
	}

</style>
